<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/* 练习：1.圆形 2.正三角形
			思路1：宽高与边框倒角一致
			思路2：div#triangle  
			                css中：抓到div   【斜线】
			               左边框：50像素实线红色
						   右边框：50像素实线黄色
						   下边框：50像素实线黑色
			 注意：先别加宽高      transparent 透明色
			*/
		   div#circle{
			   width: 400px;
			   height: 400px;
			   border: 1px solid red;
			   border-radius: 50%;
			   /*边框阴影 box-shadow 属性*/
			   box-shadow: 5px 5px 50px 50px red inset;
		   }
		   /*思路2：div#triangle  
			                css中：抓到div   【斜线】
			               左边框：50像素实线红色
						   右边框：50像素实线黄色
						   下边框：50像素实线黑色
			 注意：先别加宽高      transparent 透明色*/
			 div#triangle{
				 width: 0;
				 border-left: 50px solid transparent;
				 border-right: 50px solid transparent;
				 border-bottom: 50px solid black;
				 /*两行：倒三角，蓝色，透明度.3
				 提醒：所有边框：50px solid transparent
				      上边框颜色改成蓝色  0,0,255
				 */
			 }
			 div#d1{
				 width: 0;
				 border: 50px solid transparent;
				border-top-color: rgba(0,0,255,.8);
				
			 }
			 /*outline  边框轮廓 只针对input  元素*/
			 input{
				 outline:1px solid red;
			 }
			 /*实际应用：统配选择器 去掉轮廓
			 *{outline:0;}
			 */
			
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		<div id="d1"></div>
		边框：<input type="text" >
	</body>
</html>